<script>
  function updateView() {
    console.log("更新视图~");
  }

  function defineReactive(target, key, value) {
    observer(value)

    Object.defineProperty(target, key, {
      get() {
        console.log("get...");
        return value
      },
      set(newValue) {
        // newValue也可能是一个新的对象，也需要深度递归遍历
        observer(newValue);

        console.log("set...");
        value = newValue;
        updateView();
      }
    })
  }

  function observer(target) {
    if (typeof target !== "object" || target === null) {
      return target;
    }
    for (let key in target) {
      // console.log(key);
      defineReactive(target, key, target[key])
    }
  }

  let data = {
    name: "码路",
    age: 18,
    info: {
      address: "bj"
    }
  }
  observer(data);

  // console.log(data.name);
  // console.log(data.age);
  // console.log(data.info);

  // data.name = "wc";

  data.age = {
    a: 110
  }

</script>